<template>
  <div class="pomodoro-container">
    <h2>番茄时钟</h2>
    <div class="timer-display">
      <span class="time">{{ formatTime(timeLeft) }}</span>
    </div>
    
    <div class="controls">
      <el-button-group>
        <el-button type="primary" @click="startTimer" :disabled="isRunning">
          开始
        </el-button>
        <el-button type="warning" @click="pauseTimer" :disabled="!isRunning">
          暂停
        </el-button>
        <el-button type="danger" @click="resetTimer">
          重置
        </el-button>
      </el-button-group>
    </div>

    <div class="mode-selector">
      <el-radio-group v-model="currentMode" @change="handleModeChange">
        <el-radio-button value="work">工作</el-radio-button>
        <el-radio-button value="shortBreak">短休息</el-radio-button>
        <el-radio-button value="longBreak">长休息</el-radio-button>
      </el-radio-group>
    </div>

    <div class="settings">
      <el-form label-position="top">
        <el-form-item label="工作时长（分钟）">
          <el-input-number v-model="settings.workTime" :min="1" :max="60" />
        </el-form-item>
        <el-form-item label="短休息时长（分钟）">
          <el-input-number v-model="settings.shortBreakTime" :min="1" :max="30" />
        </el-form-item>
        <el-form-item label="长休息时长（分钟）">
          <el-input-number v-model="settings.longBreakTime" :min="1" :max="60" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'

const timeLeft = ref(25 * 60) // 默认25分钟
const isRunning = ref(false)
const currentMode = ref('work')
let timer = null

const settings = ref({
  workTime: 25,
  shortBreakTime: 5,
  longBreakTime: 15
})

const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

const startTimer = () => {
  if (!isRunning.value) {
    isRunning.value = true
    timer = setInterval(() => {
      if (timeLeft.value > 0) {
        timeLeft.value--
      } else {
        clearInterval(timer)
        isRunning.value = false
        // 播放提示音
        new Audio('notification.mp3').play().catch(() => {})
      }
    }, 1000)
  }
}

const pauseTimer = () => {
  if (isRunning.value) {
    clearInterval(timer)
    isRunning.value = false
  }
}

const resetTimer = () => {
  pauseTimer()
  handleModeChange(currentMode.value)
}

const handleModeChange = (mode) => {
  pauseTimer()
  switch (mode) {
    case 'work':
      timeLeft.value = settings.value.workTime * 60
      break
    case 'shortBreak':
      timeLeft.value = settings.value.shortBreakTime * 60
      break
    case 'longBreak':
      timeLeft.value = settings.value.longBreakTime * 60
      break
  }
}

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.pomodoro-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.timer-display {
  font-size: 72px;
  font-weight: bold;
  margin: 40px 0;
}

.controls {
  margin: 20px 0;
}

.mode-selector {
  margin: 20px 0;
}

.settings {
  margin-top: 40px;
  text-align: left;
}
</style> 